﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery UI .aspx.cs" Inherits="ProjectStudy.jQuery_UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui-1.12.1/jquery-ui.js" type="text/javascript"></script>
    <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui-1.12.1/jquery-ui.min.js" type="text/javascript"></script>
    <link href="jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.12.1/jquery-ui.structure.min.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.12.1/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" />

    <%--弹窗--%>
    <%--<link href="Styles/htmleaf-demo.css" rel="stylesheet" type="text/css" />--%>
    <link href="Styles/normalize.css" rel="stylesheet" type="text/css" />
    <link href="Styles/zeroModal.css" rel="stylesheet" type="text/css" />

    <%--日期选择--%>
    <script src="Scripts/jedate.js" type="text/javascript"></script>
    <script src="Scripts/jedate.min.js" type="text/javascript"></script>

    <%--弹窗--%>
    <script src="Scripts/zeroModal.js" type="text/javascript"></script>
    <script src="Scripts/zeroModal.min.js" type="text/javascript"></script>

    <%--复选框、单选框--%>
    <script src="Scripts/checkbix.js" type="text/javascript"></script>
    <script src="Scripts/checkbix.min.js" type="text/javascript"></script>
    <%--<link href="Styles/checkbix.css" rel="stylesheet" type="text/css" />--%>
    <link href="Styles/checkbix.min.css" rel="stylesheet" type="text/css" />

    <%--下拉列表--%>
    <%--<script src="Scripts/jquery-jSelect.js" type="text/javascript"></script>
    <script src="Scripts/jquery-jSelect.min.js" type="text/javascript"></script>--%>
    <link href="Styles/j-select.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">

        Checkbix.init();
        $(function () {
            
        });
        
    </script>

    <script type="text/javascript">
        $(function () {
            //Tab
            $("#datepicker").datepicker();
            $("#tabs").tabs();
            $(document).tooltip();
            $("#btn1").click(function () {
                $("#dialog").dialog();
            });

            //智能提示
            var availableTags = ["cxf", "程相飞", "张三", "李四"];
            $("#tags").autocomplete({
                source: availableTags
            });

            //年月日选择
            jeDate({
                dateCell: '#testy',
                isinitVal: true,
                format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月 
                minDate: '2010-06-01', //最小日期
                maxDate: '2020-06-01' //最大日期
            })

            //年月日时分秒选择
            jeDate({
                dateCell: "#ymdhms",
                format: "YYYY-MM-DD hh:mm:ss",
                //isinitVal:true,
                isTime: true,
                festival: true, //显示节日
                minDate: "2015-09-19 00:00:00",
                maxDate: "2019-09-19 00:00:00"
            })

            //年月选择
            jeDate({
                dateCell: "#ym", //isinitVal:true,
                format: "YYYY-MM",
                isinitVal: true,
                isTime: false, //isClear:false,
                minDate: "2015-10-19 00:00:00",
                maxDate: "2016-11-8 00:00:00"
            })


            //密码强度检测
            $('#pass').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色 
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
                }
                else {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
                }
                return true;
            });

            //弹窗--alert
            $("#btn2").click(function () {
                zeroModal.alert({
                    title: '提示',
                    content: '请选择数据后再进行操作!',
                    //contentDetail: '请选择数据后再进行操作',
                    okFn: function () {
                        //回调函数
                    }
                });
            });

            //弹窗-confirm
            $("#btn3").click(function () {
                zeroModal.confirm({
                    title: '提示',
                    content: '确定删除吗？',
                    //contentDetail: '提交后将不能进行修改。',
                    okFn: function () {
                        //确定
                    },
                    cancelFn: function () {
                        //取消
                    }
                });
            });

            //单选按钮
            $("#cb1_sex").click(function () {
                $("#cb2_sex").removeAttr("checked");
                $("#cb1_sex").attr("checked", true);
            });
            $("#cb2_sex").click(function () {
                $("#cb1_sex").removeAttr("checked");
                $("#cb2_sex").attr("checked", true);
            });
        });
  </script>


  <style type="text/css">
  label {
    display: inline-block;
    width: 5em;
  }
  </style>


<%--密码强度样式--%>
<style type="text/css"> 
/*密码强度*/
.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
.pw-bar{background: url(images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url(images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
</style>



</head>
<body>
    <form id="form1" runat="server">
    <div> 
      <p>日期：<input type="text" id="datepicker"/></p>
       <br />
    </div>
    <input  type="button" id="btn1" value="弹窗"/><br /><br />
    <input  type="button" id="btn2" value="弹窗-alert"/><br /><br />  
    <input  type="button" id="btn3" value="弹窗-confirm"/><br /><br />
    <br />
    <input  type="checkbox" id="mycheckbox" class="checkbix" value="basketball" data-text="篮球"/>&nbsp;&nbsp;
    <input  type="checkbox" id="mycheckbox1" class="checkbix" data-color="blue" value="soccer" data-text="足球" />&nbsp;&nbsp;
    <input  type="checkbox" id="mycheckbox2" class="checkbix" data-color="red" value="badminton" data-text="羽毛球"/>
    <br />
    <br />
    <input id="cb1_sex" type="checkbox" class="checkbix" data-text="男" data-shape="circled" value="man"/>&nbsp;&nbsp;
    <input id="cb2_sex" type="checkbox" class="checkbix" data-text="女" data-shape="circled" data-color="blue" value="woman"/>
    <br />
    <br />
    <select id="mySelect" class="select">
				<option value="北京市">北京市</option>
				<option value="上海市">上海市</option>
				<option value="广州市">广州市</option>
				<option value="深圳市">深圳市</option>
			</select>
    <br />
    <br />
    <div id="dialog" title="基本的对话框" style=" display:none">
     <input  type="text" id="username"/>
     <br />
     <input  type="password" id="pwd"/>
     <br />
     <input  type="button" id="submit" value="提交"/>
    </div>
    <br />
        <div id="tabs" style=" width:400px">
            <ul>
                <li><a href="#tabs-1">Tab1</a></li>
                <li><a href="#tabs-2">Tab2</a></li>
                <li><a href="#tabs-3">Tab3</a></li>
            </ul>
      <div id="tabs-1">
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
          <br />
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
          <br />
          <asp:Button ID="Button1" runat="server" Text="提交"/>
      </div>
      <div id="tabs-2">
        <p>22222</p>
      </div>
      <div id="tabs-3">
        <p>333333</p>
      </div>
      </div>
  <br />
  <div>
  <p><label for="age">您的年龄：</label><input id="age" title="18-100岁之间"/></p><br />
  <p><label for="age">您的性别：</label><input id="Text1" title="男或女"/></p><br />
  </div>

  <div class="ui-widget">
  <label for="tags">智能提示：</label>
  <input id="tags" type="text" />
      <br />
      <br />
  </div>
  年月日选择：
  <input  type="text" id="testy"/>
    <br />
    <br />
    年月日时分秒选择：<input  type="text" id="ymdhms"/><br />
    <br />
    年月选择：<input  type="text" id="ym"/>
    <br />
    <br />

    <table style="width:320px;">
        <tr>
            <th>
                密码</th>
            <td>
                <span class="tbl-txt">
                <input id="pass" runat="server" class="input-style" maxlength="30" name="pass" 
                    size="30" type="password" /></span></td>
        </tr>
        <tr>
            <th>
                <br />
            </th>
            <td id="level" class="pw-strength">
                <div class="pw-bar">
                </div>
                <div class="pw-bar-on">
                </div>
                <div class="pw-txt">
                    <span>弱</span> <span>中</span> <span>强</span>
                </div>
            </td>
        </tr>
    </table>
    <br />
    <asp:Button ID="Button2" runat="server" Text="调用web service" 
        onclick="Button2_Click" />
    </form>
</body>
</html>
